<template>
  <div class="userStore-container">
    <div class="store-info-container">
      <!-- 店铺信息卡片 -->
      <el-card class="store-info-card">
        <template #header>
          <div class="card-header">
            <h3>店铺信息</h3>
          </div>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="店铺名称">
            <span>{{ storeInfo.name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            <span>{{ storeInfo.mobile }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="店长名">
            <span>{{ storeInfo.store_manager_name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="邮寄地址">
            <span>{{ storeInfo.email_address }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="详细地址">
            <span>{{ storeInfo.address }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="店铺经纬度">
            {{ `${storeInfo.lat},${storeInfo.lng}` }}
          </el-descriptions-item>
          <el-descriptions-item label="营业执照">
            <el-image
              v-if="storeInfo.business_license"
              :src="storeInfo.business_license"
            />
          </el-descriptions-item>
          <el-descriptions-item label="店铺logo">
            <el-image v-if="storeInfo.logo" :src="storeInfo.logo" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="audit-result-card" v-if="action === 'edit'">
        <template #header>
          <div class="card-header">
            <h3>审核结果</h3>
          </div>
        </template>

        <el-descriptions :column="1" border>
          <el-descriptions-item label="审核结果">
            <el-radio-group v-model="auditInfo.audit_status">
              <el-radio :label="2">通过</el-radio>
              <el-radio :label="3">不通过</el-radio>
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item label="备注内容">
            <el-input v-model="auditInfo.audit_remarks" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <div class="button-container">
        <el-button @click="handleReturn">返回</el-button>
        <el-button
          v-repeat
          type="primary"
          @click="handleSubmit"
          v-if="action === 'edit'"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'storeInfoApprove',
  }
</script>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { getStoreInfo, auditStore } from '@/api/store'
  import { message } from '~/src/utils/helper'

  const router: any = useRouter()
  const route = useRoute()
  const action = ref(route.query.action || 'view')

  // 店铺信息数据
  const storeInfo = reactive({
    id: '',
    name: '',
    mobile: '',
    store_manager_name: '',
    lat: '',
    lng: '',
    email_address: '',
    address: '',
    business_license: '', // 需要替换为实际的图片路径
    logo: '', // 需要替换为实际的图片路径
    audit_status: undefined,
    audit_remarks: '',
  })

  // 审核结果数据
  const auditInfo = reactive({
    audit_status: 1,
    audit_remarks: '',
  })

  const handleSubmit = async () => {
    if (!auditInfo.audit_status) {
      ElMessage.warning('请选择审核结果')
      return
    }
    if (auditInfo.audit_status === 3 && !auditInfo.audit_remarks) {
      ElMessage.warning('审核不通过时，请填写审核备注')
      return
    }
    const res: any = await auditStore({
      id: route.query.id,
      audit_status: auditInfo.audit_status,
      audit_remarks: auditInfo.audit_remarks,
    })
    if (res.code === 200) {
      // 提交审核结果
      message('审核提交成功')
      // 返回列表页或其他操作
      router.push({ path: '/store/storeList', query: { repalce: true } })
    }
  }

  const getStoreInfoData = async () => {
    const { data } = await getStoreInfo({
      id: route.query.id,
    })
    Object.keys(storeInfo).forEach((key) => {
      storeInfo[key] = data[key]
    })
    console.log('data', data)
  }

  // 返回按钮处理函数
  const handleReturn = () => {
    Object.keys(storeInfo).forEach((key) => {
      storeInfo[key] = undefined
    })
    Object.assign(auditInfo, {
      audit_status: 1,
      audit_remarks: '',
    })
    router.push({ path: '/store/storeList', query: { repalce: true } })
  }

  // 获取状态对应的类型
  const getStatusType: any = (status: number) => {
    switch (status) {
      case 1:
        return {
          name: '待审核',
          type: 'warning',
        }
      case 2:
        return {
          name: '审核通过',
          type: 'success',
        }
      case 3:
        return {
          name: '审核不通过',
          type: 'danger',
        }
    }
  }
  onMounted(() => {
    getStoreInfoData()
  })
</script>
<style scoped></style>

<style lang="scss" scoped>
  .is-error {
    :deep(.el-input__wrapper) {
      border: 1px solid #f56c6c;
      &:focus {
        border: 1px solid #1890ff;
      }
    }
  }
  .store-info-container {
    padding: 20px;

    .store-info-card,
    .audit-result-card {
      margin-bottom: 20px;

      .card-header {
        h3 {
          margin: 0;
          color: #303133;
        }
      }
    }

    .license-image,
    .logo-image {
      width: 200px;
      height: 100px;
      object-fit: contain;
    }

    .button-container {
      text-align: center;
      margin-top: 20px;
    }
  }

  :deep(.el-descriptions__label) {
    width: 120px;
    text-align: right;
    font-weight: bold;
  }
  .set-address {
    cursor: pointer;
    color: #7aa9f7;
    border-bottom: 1px solid #7aa9f7;
  }

  // 添加预览相关样式
  :deep(.el-image-viewer__wrapper) {
    .el-image-viewer__close {
      color: #fff;
    }
  }

  .el-image {
    cursor: pointer;
    width: 168px;
    height: 168px;
  }

  :deep(.el-card.is-always-shadow) {
    box-shadow: none !important;
  }
  :deep(.el-card) {
    border: none !important;
  }
</style>
